import ApiCrm from "@/api/crm";
import ListView from "@/components/app/ListView";
import Moment from "@/components/app/Moment";
import Card from "@/components/common/Card";
import ByIcon from "@/components/ui/ByIcon";
import ByPopupBottom from "@/components/ui/ByPopupBottom";
import ByRow from "@/components/ui/ByRow";
import ByText from "@/components/ui/ByText";
import useFetch from "@/hooks/useFetch";
import { convertSeconds } from "@/utils";
import { ScrollView, Text, View } from "@tarojs/components";
import dayjs from "dayjs";
import { useState } from "react";

const Record = ({ source, onClick }) => {
  const {
    workerName,
    workerType,
    workerHours,
    workerStartDate,
    workerEndDate,
  } = source;

  const dutation =
    workerEndDate && workerStartDate
      ? dayjs(workerEndDate).diff(workerStartDate, "day") + 1
      : 0;

  const { hour, min } = convertSeconds(workerHours, ["hour", "min"]);
  return (
    <Card className="mx-3 my-2">
      <ByRow content="between" align="center">
        <ByText bold className="text-lg">
          {workerName}
        </ByText>
        {workerHours > 0 ? (
          <View className="text-third text-sm">
            <Text>
              打卡<Text className="text-base">{dutation}</Text>天
            </Text>

            <Text className="mx-1">
              共
              {hour > 0 && (
                <>
                  <Text className="text-base">{hour}</Text>
                  <Text>小时</Text>
                </>
              )}
              {min > 0 && (
                <>
                  <Text className="text-base">{min}</Text>
                  <Text>分钟</Text>
                </>
              )}
            </Text>

            <ByIcon name="Clock" onClick={onClick} />
          </View>
        ) : (
          <Text className="text-sm text-third">无打卡记录</Text>
        )}
      </ByRow>

      <ByRow className="text-xs text-third mt-2" content="between">
        <Text>{workerType}</Text>
        {workerStartDate && (
          <Text>
            <Moment value={workerStartDate} />
            <Text className="px-1">~</Text>
            <Moment value={workerEndDate} />
          </Text>
        )}
      </ByRow>
    </Card>
  );
};

const signTypeMap = {
  0: "签到",
  1: "签退",
};

export default ({ intentCustomerId }: { intentCustomerId: number }) => {
  const { loading, data } = useFetch<{
    workerAttendanceRecordList: any[];
  }>(ApiCrm.getWorkerAttendanceRecord, {
    defaultParams: [{ intentCustomerId }],
  });

  const list = data?.workerAttendanceRecordList || [];

  const [records, setRecords] = useState<any>();

  return (
    list.length > 0 && (
      <>
        <View className="mx-3 mt-4 mb-3 text-second">考勤记录</View>
        <ListView loading={loading}>
          {list?.map((item) => (
            <Record
              key={item.id}
              source={item}
              onClick={() => setRecords(item)}
            />
          ))}
        </ListView>

        {records && (
          <ByPopupBottom
            title={`${records.workerName}的打卡明细`}
            onCancel={() => setRecords(undefined)}
          >
            <ScrollView className="px-4 h-[50vh]" scroll-y >
              {records.list?.map((item) => (
                <View className="py-1" key={item.signTime}>
                  <ByText className="pr-5">{signTypeMap[item.signType]}</ByText>
                  <ByText>{item.signTime}</ByText>
                </View>
              ))}
            </ScrollView>
          </ByPopupBottom>
        )}
      </>
    )
  );
};
